<script setup lang="ts" name="BpmnProcess">
import Designer from '../components/Designer/index.vue'
import Palette from '../components/Palette/index.vue'
import Toolbar from '../components/Toolbar/index.vue'
import Panel from '../components/Panel/index.vue'
import { useSettingStore } from '@/store/bpmnProcess/settingStore'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { storeToRefs } from 'pinia'

const modelerStore = useModelerStore()

const settingStore = useSettingStore()

const { palette, toolbar, panel, panelMode } = storeToRefs(settingStore)

const { canRedo, canUndo } = storeToRefs(modelerStore)

const commandStackChange = () => {
  const modeler = modelerStore.getModeler
  canRedo.value = modeler.get('commandStack').canRedo()
  canUndo.value = modeler.get('commandStack').canUndo()
}
</script>

<template>
  <div class="modeler">
    <Palette v-if="palette"></Palette>
    <div class="modeler-content">
      <Toolbar v-if="toolbar"></Toolbar>
      <div class="modeler-body">
        <Designer @command-stack-changed="commandStackChange"></Designer>
      </div>
    </div>
    <template v-if="panel">
      <div v-if="panelMode === 'default'" class="bpmn-properties" id="bpmn-properties"></div>
      <Panel v-else></Panel>
    </template>
  </div>
</template>

<style scoped lang="scss">
.modeler {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;

  .modeler-content {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;

    .modeler-header {
      display: flex;
      flex-wrap: wrap;
      background: var(--el-fill-color-blank) url("@/designer/Common/assets/line.svg") left 0 top 0;

      .button-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 2px 2px 3px;
        border-right: 1px solid var(--el-border-color-lighter);

        .el-dropdown {
          .item-button {
            width: auto;
            line-height: 0;

            .el-icon {
              margin-left: 6px;
            }

            .el-icon+.el-icon {
              margin-right: 2px;
              margin-left: 0;
            }
          }
        }

        .item-button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          margin: 2px;
          border-radius: 2px;
          cursor: pointer;

          &.input {
            width: 70px;
          }

          &:hover {
            background-color: var(--el-color-primary-light-9);

            .el-icon {
              color: var(--el-color-primary);
            }
          }

          .el-icon {
            font-size: 20px !important;
          }
        }
      }
    }

    .modeler-body {
      position: relative;
      flex: 1;
      background: url("@/designer/Common/assets/grid.svg") center -1px repeat;
    }
  }
}

.dark {
  .modeler {
    .modeler-content {
      .modeler-header {
        background: var(--el-fill-color-blank) url("@/designer/Common/assets/line_dark.svg") left 0 top 0;
      }

      .modeler-body {
        background: url("@/designer/Common/assets/grid_dark.svg") center -1px repeat;
      }
    }
  }
}

.bpmn-properties {
  width: 480px;
}
</style>
